<template>
	<view class="flex justify-end" v-if="orderInfo">
		<navigator v-if="isList" open-type="navigate" class="service-box">
			<view class="service">
				<view class="service-content">
					<button open-type="contact" class="cu-btn round margin-right"
						style="background-color: transparent; display: block;">
						<view class="cuIcon-servicefill"></view>
						<view class="mt16">客服</view>
					</button>
				</view>
			</view>
		</navigator>
		<navigator v-else open-type="navigate" class="service-box">
			<view class="service1">
				<view class="service-content">
					<button class="cu-btn round line-grey margin-right" :loading="loading" :disabled="loading"
						open-type="contact">
						客服
					</button>
				</view>
			</view>
		</navigator>
		<button class="cu-btn round line-grey margin-right" @tap="orderDel" :loading="loading" :disabled="loading" type
			v-if="orderInfo.status == '5' && orderInfo.isPay == '0'">
			删除订单
		</button>
		<button class="cu-btn round line-grey margin-right" @tap="orderCancel" :loading="loading" :disabled="loading"
			type v-if="orderInfo.isPay == '0' && !orderInfo.status">
			取消订单
		</button>
		<button class="cu-btn round line-grey margin-right" @tap="orderLogistics" :loading="loading" :disabled="loading"
			type v-if="
        orderInfo.deliveryWay == '1' &&
        orderInfo.deliveryType == '1' &&
        (orderInfo.status == '2' ||
          orderInfo.status == '3' ||
          orderInfo.status == '4')
      ">
			查看物流
		</button>
		<button class="cu-btn round  margin-right" :class="'bg-'+theme.backgroundColor" @tap="goPay" :loading="loading"
			:disabled="loading" type v-if="orderInfo.isPay == '0' && !orderInfo.status&&!isAudit">
			立即付款
		</button>
		<!-- <button class="cu-btn round  margin-right" bindtap="urgeOrder" loading="{{loading}}" 
  disabled="{{loading}}" type="" wx:if="{{orderInfo.status == '1'}}">
    提醒卖家发货
  </button> -->
		<button class="cu-btn round  margin-right" :class="'bg-'+theme.backgroundColor" @tap="showPopup = true"
			:loading="loading" :disabled="loading" type v-if="orderInfo.status == '2'">
			确认收货
		</button>
		<button class="cu-btn round  margin-right" :class="'bg-'+theme.backgroundColor" @tap="orderAppraise"
			:loading="loading" :disabled="loading" type
			v-if="orderInfo.status == '3' && orderInfo.appraisesStatus == '0'">
			评价
		</button>
		<view v-if="showPopup">
			<view class="mask" @click="showPopup = false"> </view>
			<view class="reder-receive">
				<view class="title">
					<view></view>
					<view class="f34">确认已收到货</view>
					<view class="cuIcon-close f30" @tap="showPopup = false"></view>
				</view>
				<view class="info">
					<view class="img-box">
						<image :src="orderInfo.listOrderItem[0].picUrl" mode="scaleToFill" />
						<view class="tag">共{{ orderInfo.listOrderItem.length }}件</view>
					</view>
					<view class="tip f28">
						为了保证您的售后权益，请确认无误后再点击确认收货
					</view>
				</view>
				<button class="cu-btn round  margin-right btn" :class="'bg-'+theme.backgroundColor" @tap="orderReceive">
					确定
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "utils/api";
	import util from "utils/util";
	const app = getApp();

	export default {
		data() {
			return {
				loading: false,
				showPopup: false,
				theme: app.globalData.theme, //全局颜色变量
			};
		},

		components: {},
		props: {
			isList: {
				type: Boolean,
				default: false,
			},
			isAudit: {
				type: Boolean,
				default: false,
			},
			orderInfo: {
				type: Object,
				default: () => ({}),
			},
			callPay: {
				type: Boolean,
				default: false,
			},
			contact: {
				type: Boolean,
				default: false,
			},
		},

		mounted() {
			let that = this;
			setTimeout(function() {
				if (that.callPay && that.orderInfo.paymentPrice > 0) {
					that.goPay();
				}
			}, 1000);
			console.log(this.orderInfo, "orderInfo");
		},

		methods: {
			orderReceive() {
				let that = this;
				let id = that.orderInfo.id;
				api.orderReceive(id).then((res) => {
					uni.showToast({
						title: "收货成功",
						icon: "success",
					});
					that.$emit("orderReceive", res);
					that.showPopup = false
				});
				// uni.showModal({
				//   content: "是否确认收货吗？",
				//   cancelText: "我再想想",
				//   confirmColor: "#ff0000",
				//   success(res) {
				//     if (res.confirm) {

				//     }
				//   },
				// });
			},

			orderCancel() {
				let that = this;
				uni.showModal({
					content: "确认取消该订单吗？",
					cancelText: "我再想想",
					confirmColor: "#ff0000",
					success(res) {
						if (res.confirm) {
							let id = that.orderInfo.id;
							api.orderCancel(id).then((res) => {
								that.$emit("orderCancel", res);
							});
						}
					},
				});
			},

			orderDel() {
				let that = this;
				uni.showModal({
					content: "确认删除该订单吗？",
					cancelText: "我再想想",
					confirmColor: "#ff0000",
					success(res) {
						if (res.confirm) {
							let id = that.orderInfo.id;
							api.orderDel(id).then((res) => {
								that.$emit("orderDel", res);
							});
						}
					},
				});
			},

			goPay() {
				// this.loading = true;
				// let {
				// 	paymentPrice: totalFee,
				// 	orderNo: billNumber
				// } = this.orderInfo;
				// let redirectUrl =  "/pages/order/order-list/index";
				// api
				// 	.unifiedOrderBymp({
				// 		totalFee,
				// 		billNumber,
				// 		redirectUrl
				// 	})
				// 	.then(({
				// 		data
				// 	}) => {
				// 		location.href = JSON.parse(data);
				// 		this.loading = false;
				// 	});
				if (this.orderInfo.paymentPrice > 0) {
					uni.navigateTo({
						url: "/pages/pay/index?orderId=" + this.orderInfo.id,
					});
				} else {
					//0元支付
					this.loading = true;
					let orderInfo = this.orderInfo;
					api
						.unifiedOrder({
							id: orderInfo.id,
							// #ifdef MP-WEIXIN
							tradeType: "JSAPI",
							// #endif
							// #ifdef H5
							tradeType: util.isWeiXinBrowser() ? "JSAPI" : "MWEB",
							// #endif
							// #ifdef APP-PLUS
							tradeType: "APP",
							// #endif
						})
						.then((res) => {
							this.loading = false;
							//0元付款
							//支付成功跳转到支付结果页面
							uni.redirectTo({
								url: "/pages/order/order-pay-result/index?orderId=" + orderInfo.id,
							});
						});
				}
			},

			urgeOrder() {
				uni.showToast({
					title: "已提醒卖家发货",
					icon: "success",
					duration: 2000,
				});
			},

			orderLogistics() {
				uni.navigateTo({
					url: "/pages/order/order-logistics/index?id=" +
						this.orderInfo.orderLogistics.id,
				});
			},

			orderAppraise() {
				uni.navigateTo({
					url: "/pages/appraises/form/index?orderId=" + this.orderInfo.id,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.service {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-left: 38rpx;
	}

	.service1 {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		padding-left: 38rpx;
	}

	.service-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.service-box {
		flex: 1;
		text-align: left;
	}

	.reder-receive {
		background-color: #fff;
		border-radius: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 32rpx;
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9999;

		.title {
			display: flex;
			align-content: center;
			justify-content: space-between;
		}

		.tip {
			margin-bottom: 80rpx;
			padding: 0 136rpx;
			text-align: center;
			color: #00000090;
		}

		.img-box {
			width: 180rpx;
			height: 180rpx;
			margin: 80rpx auto 48rpx;
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.tag {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: #00000045;
				color: #fff;
				text-align: center;
				padding: 6rpx 0;
			}
		}
	}

	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #00000060;
		width: 100vw;
		height: 100vh;
		z-index: 9998;
	}

	.btn {
		width: 100%;
	}
</style>